/*
 * @Description: 
 * @Autor: 万洲
 * @Date: 2022-11-22 16:28:33
 * @LastEditors: 万洲
 * @LastEditTime: 2022-12-07 16:59:26
 */
import BaseTableLayout from '@/components/BaseTableLayout';
import { ElButton, ElPagination, ElTable, ElTableColumn, ElDropdown, ElForm, ElFormItem, ElInput, ElScrollbar } from 'element-plus';
import { defineComponent, reactive, ref, StyleValue } from 'vue';
import { Plus, Delete, Edit, Download } from '@element-plus/icons-vue'
import { baseTableConfig } from '@/constants/compontentsConfig';
import RenderDropDownButton from '@/components/RenderDropDownButton';
const tableData = (() => {
    return Array.from({ length: 10 }).map(() => {
        return {
            date: '2016-05-03',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles',
        }
    })
})()

export default defineComponent({
    setup: (props) => {
        const state = reactive({
            searchModel: {
                current: 1,
                size: 10
            }
        })
        const tableRef = ref<InstanceType<typeof ElTable>>()

        const searchContaier = () => {
            return <>
                <ElForm inline>
                    <ElFormItem label='姓名' >
                        <ElInput />
                    </ElFormItem>
                    <ElFormItem label='姓名' >
                        <ElInput />
                    </ElFormItem>
                    <ElFormItem >
                        <ElButton type={"primary"} >搜索</ElButton>
                        <ElButton>重置</ElButton>
                    </ElFormItem>
                </ElForm>
            </>
        }
        const headerButtons = () => {
            return <>
                <ElButton icon={Plus} type={"primary"} plain >新增</ElButton>
                <ElButton icon={Edit} type={"success"} plain >编辑</ElButton>
                <ElButton icon={Delete} type={"danger"} plain >删除</ElButton>
                <ElButton icon={Download} type={"warning"} plain >导出</ElButton>
            </>
        }

        const tableContaier = () => {
            const moreOptions: InstanceType<typeof RenderDropDownButton>["$props"]["options"] = [
                {
                    label: "禁用",
                    click: async () => {

                    }
                }
            ]
            return <ElTable data={tableData} {...baseTableConfig} ref={tableRef}>
                <ElTableColumn type='selection' width={"55"} />
                <ElTableColumn prop='date' label='Date' width={"180"} />
                <ElTableColumn prop="name" label="Name" width={"180"} />
                <ElTableColumn prop="address" label="Address" />
                <ElTableColumn label="操作" fixed={"right"} width={"210"}>
                    <ElButton type={"primary"} size='small' >编辑</ElButton>
                    <ElButton type={"danger"} size='small'>删除</ElButton>
                    <RenderDropDownButton options={moreOptions} />
                </ElTableColumn>
            </ElTable>
        }

        const PaginationContaier = () => {
            return <ElPagination
                page-sizes={[10, 20, 30, 40, 50, 100]}
                total={400}
                v-model:current-page={state.searchModel.current}
                v-model:page-size={state.searchModel.size}
                layout="total, sizes, prev, pager, next, jumper"
                background
            />
        }
        return () => (
            <div style={{ height: "100%", backgroundColor: "#fff" }}>
                <ElScrollbar  height={"200px"}>
                    {Array.from({ length: 100 }).map(v => <div>123</div>)}
                </ElScrollbar>
            </div>
        )
    }
})
